<script setup>
import { getAllSchedulesService } from '@/api/admin';
import { getAllClinicsService } from '@/api/hospital.js';
import { ref, onMounted, nextTick, watch, computed } from 'vue';
import { ElMessage, ElPagination } from 'element-plus';

const schedules = ref([]); // 存储排班信息
const scheduleDate = ref(''); // 用户选择的日期
const clinicId = ref(null); // 用户选择的科室ID
const clinics = ref([]); // 存储科室信息

// 新增分页相关状态
const currentPage = ref(1); // 当前页码
const pageSize = ref(10); // 每页显示的条数
const total = ref(0); // 数据总数

// 获取所有排班信息
const fetchSchedules = async (pageNumber = 1) => {
    try {
        console.log('fetchSchedules is called'); // 调试信息
        currentPage.value = pageNumber; // 更新当前页码
        const formattedDate = scheduleDate.value ? formatDate(scheduleDate.value) : null;
        console.log('formattedDate:', formattedDate); // 调试信息
        const response = await getAllSchedulesService(formattedDate, clinicId.value);
        if (response.code === 0) {
            // 对排班数据按照 scheduleDate 进行排序
            response.data.sort((a, b) => new Date(a.scheduleDate) - new Date(b.scheduleDate));
            schedules.value = response.data;
            total.value = schedules.value.length; // 更新数据总数
        } else {
            ElMessage.error(response.message || '获取排班信息失败');
        }
    } catch (error) {
        ElMessage.error('获取排班信息失败');
    }
};

// 分页计算
const currentSchedules = computed(() => {
    return schedules.value.slice(
        (currentPage.value - 1) * pageSize.value,
        currentPage.value * pageSize.value
    );
});

// 格式化日期函数
const formatDate = (date) => {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
};

// 获取科室信息
const fetchClinics = async () => {
    try {
        console.log('fetchClinics is called'); // 调试信息
        const response = await getAllClinicsService();
        if (response.code === 0) {
            clinics.value = response.data;
            console.log(clinics.value);
        } else {
            ElMessage.error(response.message || '获取科室信息失败');
        }
    } catch (error) {
        ElMessage.error('获取科室信息失败');
    }
};

const resetForm = async () => {
    scheduleDate.value = ''; // 重置日期
    clinicId.value = null; // 重置科室
    schedules.value = []; // 重置排班数据
    await fetchSchedules(); // 重新获取排班数据
};

// 在组件挂载时获取排班数据和科室信息
onMounted(async () => {
    console.log('Schedule.vue: onMounted is called'); // 调试信息
    try {
        await fetchClinics();
        await fetchSchedules();
    } catch (error) {
        console.error('Schedule.vue: Error during onMounted:', error);
    }
});

watch(scheduleDate, async (newScheduleDate) => {
    schedules.value = []; // 重置排班数据
    if (newScheduleDate) {
        await fetchSchedules();
    }
});
</script>
<template>
    <el-container>
      <el-header>
        <h1>排班信息</h1>
      </el-header>
      <el-main>
        <el-form>
          <el-form-item label="选择日期:">
            <el-date-picker v-model="scheduleDate" type="date" />
            <el-form-item label="选择科室">
            <el-select v-model="clinicId" placeholder="请选择科室" style="width: 300px;">
              <el-option
                v-for="clinic in clinics"
                :key="clinic.clinicId"
                :label="clinic.clinicName"
                :value="clinic.clinicId"
              />
            </el-select>
          </el-form-item>
          <el-button type="primary" @click="resetForm">重置查询信息</el-button>
          </el-form-item>
          
          <el-button type="primary" @click="fetchSchedules">获取排班</el-button>
        </el-form>
        
        <el-table :data="currentSchedules" style="width: 100%">
          <el-table-column prop="doctorName" label="医生" />
          <el-table-column prop="scheduleDate" label="日期" />
          <el-table-column prop="dayWeek" label="星期" />
          <el-table-column prop="clinicName" label="科室" />
          <el-table-column label="时间">
            <template #default="scope">
              {{ scope.row.startTime }} - {{ scope.row.endTime }}
            </template>
          </el-table-column>
        </el-table>
  
        <!-- 分页组件 -->
        <el-pagination
          v-model:current-page="currentPage"
          :page-size="pageSize"
          :total="total"
          layout="total, prev, pager, next, jumper"
          @current-change="fetchSchedules"
        />
      </el-main>
    </el-container>
  </template>
  <style scoped>
  .el-container {
    padding: 16px;
  }
  
  .el-form {
    margin-bottom: 16px;
  }
  </style>